<template>
  <div class="departments-container">
    <div class="departments-text">
      <!-- 卡片 -->
      <el-card
        v-loading="loading"
        element-loading-text="拼命加载中。。。"
        element-loading-background="rgba(158, 139, 159, 0.9)"
        class="tree-card"
      >
        <!-- 布局 -->
        <div class="box">
          <TreeTools :node-date="company" :root="true" @addFn="addFn" />
        </div>
        <!-- 树形控件 -->
        <el-tree :data="list" :props="defaultProps" default-expand-all>
          <template v-slot="{ data }">
            <TreeTools
              :node-date="data"
              @getList="getList"
              @addFn="addFn"
              @edit="editFn"
            />
          </template>
        </el-tree>
      </el-card>
      <AddDpmt
        ref="addla"
        :show-dialog="showDialog"
        :current-data="currentData"
        @changShow="changShow"
        @getList="getList"
      />
    </div>
  </div>
</template>

<script>
import TreeTools from './TreeTools.vue'
import { getDepartmentList } from '@/api/department'
import { ListToTree } from '@/utils/index'
import AddDpmt from './AddDpmt.vue'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDpmt
  },
  data() {
    return {
      list: [],
      company: {
        name: '',
        manager: '负责人',
        id: ''
      },
      // 可重定义label和children的名字
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      loading: false,
      showDialog: false,
      currentData: {}
    }
  },
  async created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      const data = await getDepartmentList()
      this.list = ListToTree(data.depts)
      this.company.name = data.companyName
      this.loading = false
    },
    changShow() {
      this.showDialog = false
    },
    // 添加部门dialog框显示
    addFn(nodeDate) {
      this.showDialog = true
      this.currentData = nodeDate
    },
    // 修改查看部门dialog框显示
    editFn(nodeDate) {
      this.showDialog = true
      this.currentData = nodeDate
      // 数据回显
      // this.$nextTick(() => {
      //   // console.log(this.$refs.addla.form)
      //   this.$refs.addla.form = { ...this.currentData }
      // })
      this.$refs.addla.getEditDpmt(nodeDate.id)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .el-col {
    height: 30px;
    line-height: 30px;
  }
  .el-icon-caret-right:before {
    content: "\e723";
    color: #000;
  }
  .el-tree-node__expand-icon.expanded {
    transform: rotate(0deg);
  }
  .el-tree-node__expand-icon.expanded::before {
    content: "\e722";
    color: #000;
  }

  .el-tree-node__expand-icon.is-leaf::before {
    content: "\e7a5";
    color: #000;
  }
}
.departments {
  &-container {
    margin: 30px;
  }
  .tree-card {
    padding: 30px 140px;
    font-size:14px;
    .box {
      width: 80px;
    }
  }
}
</style>
